<template>
  <div class="box">
    <div class="center-container">
      <el-upload
        class="upload-demo"
        action="http://localhost:8080/api/student/upload/test2"
        :headers="headers"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        list-type="picture"
        name="file"
        :on-success="handleSuccess"
      >
        <el-button size="lager" type="primary">点击上传</el-button>
      </el-upload>
      <div class="imgbox" v-if="updateimg.length!==0">
        <div class="everybox" v-for="(item,index) in updateimg" :key="index">
          <img
            :src="item"
            @click="openDialog(item)"
          />
        </div>
      </div>
      <div class="imgbox1" v-else>
        <span>请上传图片</span>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" height="80%" :src="currentImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      fileList: [],
      dialogVisible: false, // 控制对话框的显示
      currentImageUrl: '', // 当前展示的图片URL
      updateimg: [],
      headers: {
        Authorization: localStorage.getItem('token')
      }
    }
  },
  computed: {
    formattedFileList () {
      return this.fileList.map(file => {
        // 这里可以根据需要修改文件名
        file.name = '原始图片.jpg' // 例如，您可以根据需要更改文件名
        return file
      })
    }
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
      this.updateimg = []
    },
    handlePreview (file) {
      this.currentImageUrl = file.url
      this.dialogVisible = true
      console.log(file)
    },
    openDialog (url) {
      this.currentImageUrl = url
      this.dialogVisible = true
    },
    handleSuccess (response, file, fileList) {
      // 上传成功后的逻辑
      console.log(response.response) // 上传成功后服务器返回的响应数据
      this.updateimg = response.response
      console.log(file)
      console.log(fileList) // 整个文件列表

      // 你可以在这里根据服务器返回的响应数据来处理获取照片的逻辑
      // 例如，如果服务器返回了文件的URL，你可以将它保存到fileList中
      if (response.code === 0 && response.data) {
        // 假设response.data.url是服务器返回的照片URL
        const photo = {
          url: response.data.url,
          name: '原始图片'
        }
        this.fileList.push(photo)
      }
    }
  }
}
</script>

<style scoped>
.everybox {
  height: 80px;
  display: inline-block;
  margin: 50px;
}

.imgbox {
  margin-left: 100px;
  width: 1000px;
}

.imgbox img {
  border: 5px solid #c6e2ff;
  padding: 3px;
  width: 350px;
  max-height: 250px;
}

.box {
  margin: 100px auto;
  width: 90%;
}

.center-container {
  display: flex;
  height: 80vh; /* 容器高度，视情况而定 */
}

.imgbox1 {
  width: 1200px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 50vh; /* 容器高度，视情况而定 */
  font-size: 50px;
  color: #ccc;
}

.el-upload-list__item {
  width: 200px;
}
</style>
